<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">商品列表</div>
    </div>
    <div class="input_modal">
      <div class="modal-list">
        <div class="input-item">
          <span class="name">商品标题：</span>
          <el-input
            v-model="titleLike"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">商品状态：</span>
          <el-select
              v-model='saleStatus'
              placeholder='-请选择-'
              style="height: 30px;  line-height: 30px;width:170px;"
            >
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                style="height: 30px;  line-height: 30px;width:120px;"
              ></el-option>
            </el-select>
        </div>
      </div>
      <div class="modal-list">
        <div class="input-item">
          <span class="name">更新时间：</span>
          <el-date-picker
            v-model="dateArr"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="modal-list">
        <div class="input-item category">
          <span  class="name">商品分类：</span>
          <el-select
            v-model='categoryParentId'
            placeholder='-请选择-'
            @change="sortChange"
            style="height: 30px;  line-height: 30px;width:140px;"
           >
            <el-option
              label="全部"
              value=""
            ></el-option>
            <el-option
              v-for="item in sortArr"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
          <span style="margin:0 5px 0 10px;">></span>
          <el-select
            filterable
            v-model='categoryId'
            @change="sortChange1"
            placeholder='-请选择二级分类-'
            style="height: 30px;  line-height: 30px;width:140px;"
            >
            <el-option
              v-for="item in sortArr1"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
          <span style="margin:0 5px 0 10px;">></span>
          <el-select
            filterable
            v-model='secondcategoryId'
            placeholder='-请选择三级分类-'
            style="height: 30px;  line-height: 30px;width:140px;"
            >
            <el-option
              v-for="item in sortArr2"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        
      </div>
      <div class="btns-top">
          <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getList"
        >查询</el-button>
        <el-button
          size="mini"
          icon="el-icon-refresh"
          @click="refresh"
        >重置</el-button>
      </div>
    </div>
    <div class="input_modal add">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="linkTo"
          >新增</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-sort-up"
            @click="upBtn('SALE')"
          >批量上架</el-button>
          <el-button
            size="mini"
            icon="el-icon-sort-down"
            @click="upBtn('NOTSALE')"
          >批量下架</el-button>
        </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="25">
        </el-table-column>
        <el-table-column
          prop="id"
          :formatter="formatter"
          label="商品ID"
        ></el-table-column>
        <el-table-column
          prop="title"
          :formatter="formatter"
          label="商品标题"
          width="150"
        >
          <template slot-scope="scope">
              <div :title="scope.row.title" class="name-table">{{scope.row.title}}</div>
            </template>
        </el-table-column>
        <el-table-column
          prop="categoryParentName"
          label="商品分类"
          width="120"
        >
          <template slot-scope="scope">
           {{scope.row.firstCategoryParentName}} > {{scope.row.categoryParentName}} > {{scope.row.categoryName}}
          </template>
        </el-table-column>
        <el-table-column prop="productType" label="商品类型">
           <template slot-scope="scope">
              {{returnType(scope.row.productType)}}
            </template>
        </el-table-column>
        <el-table-column
          prop="supplier"
          :formatter="formatter"
          label="供应商"
        ></el-table-column>
        <el-table-column
          prop="plateCode"
          label="商品图片"
          width='100'
        >
          <template slot-scope="scope">
            <img
              @click="codeShow(scope.row.exampleImageUrl.fileUrl)"
              style="width:60px;height:40px;cursor:pointer"
              :src="scope.row.exampleImageUrl.fileUrl"
              alt=""
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="costPrice"
          label="成本价"
        ></el-table-column> -->
        <el-table-column
          prop="salePrice"
          label="销售价格"
        ></el-table-column>
        <!-- <el-table-column
          prop="modelStock"
          :formatter="formatter1"
          label="库存"
        > 
       
        </el-table-column> -->
         <el-table-column
          prop="status"
          :formatter="formatter1"
          label="商品状态"
        >
        <template slot-scope="scope">
               <span v-html="getStatus(scope.row.status)"></span>
        </template>
        </el-table-column>
        <!-- <el-table-column
          prop="saleCount"
          :formatter="formatter1"
          label="销量"
        ></el-table-column> -->
        <el-table-column
          prop="gmtModified"
          :formatter="formatter"
          label="更新时间"
        ></el-table-column>
         <!-- <el-table-column
          prop="gmtModified"
          label="是否热门"
        >
           <template slot-scope="scope">
             {{scope.row.isHot == 'y'?'是':'否  '}}
          </template>  
        </el-table-column>
        <el-table-column
          prop="gmtModified"
          label="是否新品"
        >
           <template slot-scope="scope">
             {{scope.row.isNew == 'y'?'是':'否  '}}
          </template>  
        </el-table-column> -->
        <el-table-column
          prop=""
          label="操作"
          width='220'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status == 'SALE'"
              @click="$router.push('/goodCheck?id='+scope.row.id+'&type='+scope.row.firstCategoryParentName +'>'+ scope.row.categoryParentName  +'>'+ scope.row.categoryName)"
            >查看商品</el-button>
            <el-button
              type="primary"
              size="mini"
              class="el-icon-edit"
              v-if="scope.row.status != 'SALE'"
              @click="$router.push('/goodEdit?id='+scope.row.id)"
            >编辑</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="linkToTop(scope.row.id,scope.row.status)"
            >{{scope.row.status !='SALE' ?'立即上架':'放入仓库'}}</el-button>
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              @click="linkToDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <el-dialog
        title="查看图片"
        :visible.sync="codeState"
        width="40%">
        <img style="width:100%" :src="codeImg" alt="">
        <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      modelList: [],
      codeState:false,
      codeImg:'',
      bannerArr: [
        {
          name: "全部",
          id: ""
        },
        {
          name: "启用",
          id: "y"
        },
        {
          name: "禁用",
          id: "n"
        }
      ],
      dateArr: [],
      sortArr: [],
      sortArr1: [],
      sortArr2:[],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      categoryParentId: null,
      categoryId: null,
      productCodeLike: "",
      titleLike: "",
      ids:[],
      saleStatus:'',
      secondcategoryId:'',
      statusList: [{
        id: '',
        name: '全部'
      },{
        id: 'SALE',
        name: '在售'
      },{
        id: 'NOTSALE',
        name: '仓库中'
      } ]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
    this.getArr();
  },
  methods: {
    codeShow(pic){
        this.codeState = true
        this.codeImg = pic
      },
    returnType(status){
        switch(status){
         case 'GOLD':
           return '红包商品';
           break;
         case 'SILVER':
           return '银豆商品';
           break;
        case 'RMB_ORDINARY':
           return '实物商品';
           break;
        case 'RMB':
           return '激活商品';
           break;
       }
    },
    getStatus(status){
       switch(status){
         case 'SALE':
           return '在售';
           break;
         case 'NOTSALE':
           return '仓库中';
           break;
       }
    },
     editModelCode:function(item){
           item.active = !item.active;
     },
     saveModelCode:function(item){
          let url = CONSTANT.URL.LIST.updateModelStock;
          let param = {
               	modeCode: item.modelCode,
                productCode: item.productCode,
                stock: item.modelStock
          }
          common.post(url, param, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.loading = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
     },
     openSoldOut:function(id){
        this.dialogVisible = true;
        this.getDetailById(id);
     },
     getDetailById: function(id) {
      let url = CONSTANT.URL.LIST.findModelByProductCode;
      common.get(url+"/"+id,"", res => {
        if (res.code == 200) {
         let data = res.data.bussData;
         if(data.length>0){
           data.forEach(item=>{
              item.active = false;
              this.modelList.push(item);
           })
         }
        }
      });
    },
    handleClose(done) {
      done();
      this.getList();
    },
    handleSelectionChange(row){
      this.ids= []
      row.map(item=>{
        this.ids.push(item.id)
      })
    },
    deleteUp(){
      if(!this.ids.length){
        this.$message({
          type: "warning",
          message: '请勾选商品'
        });
        return
      }
       let ids = this.ids.join(',')
      this.$confirm(`确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.PRODUCTDELETE;
          common.del(url, ids, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    upBtn(state){
      if(!this.ids.length){
        this.$message({
          type: "warning",
          message: '请勾选商品'
        });
        return
      }
      let url = CONSTANT.URL.LIST.PRODUCTSHELVES,
        data = {
          ids: this.ids,
          saleStatus: state
        };

      common.post(url, data, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.getList();
        } else {
          this.$message({
            type: "warning",
            message: res.data.errMsg
          });
        }
      });
    },
    sortChange(val) {
      this.categoryId = "";
      if (!val) {
        this.sortArr1 = [];
        return;
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr1 = res.data.bussData;
      });
    },
    sortChange(val) {
      this.categoryId = "";
      this.secondcategoryId = ''
      if (!val) {
        this.sortArr1 = [];
        return;
      }
      this.sortArr2 = [];
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr1 = res.data.bussData;
      });
    },
    sortChange1(val) {
      this.secondcategoryId = "";
      if (!val) {
        this.sortArr2 = [];
        return;
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr2 = res.data.bussData;
      });
    },
    getArr: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        levelCount:1
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    linkToTop(id, state) {
      this.$confirm(
        `确定${state == "SALE" ? "放入仓库" : "立即上架"}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
       )
        .then(() => {
          let url = CONSTANT.URL.LIST.PRODUCTSHELVES,
            data = {
              ids: [id],
              saleStatus: state == "SALE"?'NOTSALE':'SALE'
            };

          common.post(url, data, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    linkToDel(id) {
      this.$confirm(`确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.PRODUCTDELETE;
          common.del(url, id, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    formatter1(row, column, cellValue) {
      return cellValue ? cellValue : 0;
    },
     refresh(){
      this.pageIndex = 1
      this.dateArr = []
      this.titleLike = ''
      this.categoryParentId = ''
      this.categoryId = ''
      this.secondcategoryId = ''
      this.saleStatus = ''
      this.sortArr1 = [];
      this.sortArr2 = [];
      this.getList()
    },
    getList: function() {
      let date, date1;
      if (this.dateArr&&this.dateArr.length) {
        [date, date1] = this.dateArr;
      }
      let url = CONSTANT.URL.LIST.PRODUCTBYPAGE;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        titleLike: this.titleLike,
        gmtModifiedGE: date,
        gmtModifiedLE: date1,
        firstCategoryParent: this.categoryParentId,
        categoryParent: this.categoryId,
        category:this.secondcategoryId,
        status:this.saleStatus
      };
      this.loading = true;
      common.post(url, data, res => {
        this.loading = false;
        res.data.bussData.forEach(item => {
          item.sortArr = [];
        });
        this.tableData = res.data.bussData;
        this.pageCount = res.data.count;
      });
    },
    returuBanner(val) {
      let str;
      this.bannerArr.map(item => {
        if (val == item.id) {
          str = item.name;
        }
      });
      return str;
    },
    handleClickTab(tab, e) {},
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    },
    linkTo() {
      this.$router.push("goodEdit");
    }
  },
  filters: {
    formatStatus(value) {
      var list = [];
      list["y"] = "上架";
      list["n"] = "下架";
      if (value) {
        return list[value];
      } else {
        return "--";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
 .table_con{
   .el-table{
     .el-table__row{
       a{
          cursor:pointer;
          color:#409EFF;
       }
     }
   }
 }
 .table-cate {
  font-size: 14px;
  color: #606266;
  width: 90%;
  margin-left: 8%;
  margin-bottom: 30px;
  .table-head {
    overflow: hidden;
    display: flex;
    background-color: #d1d1d1;
    color: #333;
    .head-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .no-data{
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .table-item {
    overflow: hidden;
    display: flex;
    background-color: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    .table-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-right: 1px solid #e1e1e1;
      .el-button{
        background: 0 0 !important;
        border:none;
      }
      .el-input {
        float: left;
        width: 90% !important;
        margin-left: 5%;
        input {
          width: 100% !important;
        }
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
</style>
